<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="true"
    :close-on-click-modal="false"
    class="order-kind-dialog small-common-dialog-size mobile-el-dialog">
    <Title title="评分" font-size="16px" style="margin-bottom: 16px;"/>
    <div class="body-form">
      <el-form
        ref="scoreForm"
        :rules="rules"
        :model="formInfo"
        label-width="90px"
        class="form">
        <el-form-item label="评估分数" prop="score">
          <el-input
            v-model="formInfo.score"
            class="width240"
            placeholder="请输入评估分数"
            size="small"
            oninput="if(value>5)value=5;"
            @input="numInputChange($event, 'score')"
            @change="changeScore" />
        </el-form-item>
        <el-form-item label="理由" prop="reason">
          <el-input v-model="formInfo.reason" :maxlength="500" class="width240" placeholder="请输入理由" size="small" />
        </el-form-item>
        <el-form-item label="评分人:" class="mb0">
          <div>{{ userInfo.userName }}</div>
        </el-form-item>
        <el-form-item label="所属部门:" class="mb0">
          <div>{{ userInfo.departmentName[0] }}</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-container">
      <el-button :loading="confirmLoading" type="primary" size="small" @click="handleSubmit">保存</el-button>
      <el-button class="cancel-btn-style" size="small" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { postScore } from '@/api/filter';
import { mapState } from 'vuex';

export default {
  components: { Title, selectWithUserLoad },
  data() {
    return {
      dialogVisible: false,
      formInfo: {
        id: '',
        score: '',
        reason: ''
      },
      confirmLoading: false,
      rules: {
        'score': [{ required: true, message: '请输入评估分数', trigger: 'blur' }]
      }
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    openDialog(val) {
      this.formInfo.id = val;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.formInfo.id = '';
      this.formInfo.score = '';
      this.formInfo.reason = '';
      this.$refs.scoreForm.clearValidate();
    },
    numInputChange(text, prop) {
      let str = text.replace(/[^\d.]/g, '');
      str = str.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      str = str.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
      str = str.replace(/^(\-?\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后2位
      str = str === '' ? null : str;
      if (str && str < 1) {
        str = 1;
      }
      this.formInfo[prop] = str;
    },
    changeScore(val) {
      if (Number(val) < 3) {
        this.$set(this.rules, 'reason', [{ required: true, message: '请输入理由', trigger: 'blur' }]);
        this.formInfo.reason = '';
      } else {
        this.$set(this.rules, 'reason', []);
      }
      this.$nextTick(() => {
        this.$refs.scoreForm.clearValidate();
      });
    },
    handleSubmit() {
      this.$refs.scoreForm.validate(valid => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formInfo));
          this.confirmLoading = true;
          postScore(params).then(res => {
            if (res.code === 200) {
              this.handleClose();
              this.$message.success('操作成功');
              this.$emit('update');
            }
          }).finally(_ => {
            this.confirmLoading = false;
          });
        } else {
          this.$message.warning('请检查信息是否填写完整');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form {
  ::v-deep {
    .el-form-item {
      margin-bottom: 22px !important;
    }
    .mb0 {
      margin-bottom: 0 !important;
    }
  }
}
.body-form {
  @include scrollBar($width: 6px)
}
.width240 {
  width: 240px;
}
.tip-container {
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.btn-container {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
</style>
